<template>
  <view class="header-search-warp" :style="{
      paddingTop: SystemInfo.statusBarHeight + 'px',
      height: headerHeight + 'px',
    }">
    <view class="header_warp" :style="{
      width: maxWidth + 'px',
    }">
      <view class="search-input" @click="toSearch">
        <image src="/static/images/search-icon.png" />
        <input type="text" @input="inputValueChange" :disabled="disabled" />
      </view>
      <view class="icon" @click="openPopup">
        <image src="/static/images/openOrClose.png" />
      </view>

    </view>
    <u-popup v-model="showPopup" mode="top" height="50%">
      <view class="popup_view" v-if="showPopup" :style="{
      paddingTop: SystemInfo.statusBarHeight + 'px',
    }">
        <view class="left_warp">
          <scroll-view scroll-y="true" class="scroll_left">
            <view class="left_item"
              :class="{ big_active: bigActiveIndex === index }"
              v-for="(item, index) in bigList.list" :key="item.id"
              @click="changeBigItem(index)">
              {{ item.name }}
            </view>
          </scroll-view>
        </view>
        <view class="right_warp">
          <scroll-view scroll-y="true" class="scroll_right">
            <view class="right_item"
              :class="{ right_active_item: rightActiveIndex === index }"
              v-for="(item, index) in showRightList" :key="item.id"
              @click="chooseType(item.jobId, item.id, index)">
              {{ item.name }}
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    majorBigList,
    majorList,
    coursePackageList
  } from "@/api/course"
  export default {
    name: "header-search-input",
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      this.rightList = []
      return {
        showPopup: false,
        bigList: {},
        bigActiveIndex: 0,
        rightActiveIndex: -1,
        showRightList: []
      }
    },

    created() {
      majorBigList().then((res) => {
        this.bigList = res
        this.getMajorList(res.list[0].id)
      })
    },

    methods: {
      // 点击右侧的选项
      chooseType(jobId, majorId, index) {
        this.rightActiveIndex = index
        // this.$emit('clickGetMajor', {
        //   jobId,
        //   majorId
        // })
        this.showPopup = false
        this.$u.route("/pages/search/search", {
          jobId,
          majorId
        });
      },
      changeBigItem(index) {
        this.bigActiveIndex = index
        this.rightActiveIndex = -1
        if (!this.rightList[index]) {
          this.getMajorList(this.bigList.list[index].id)
        } else {
          this.showRightList = this.rightList[index].list
        }
      },
      getMajorList(jobId) {
        majorList({
          jobId,
        }).then((res) => {
          this.showRightList = res.list
          this.rightList[this.bigActiveIndex] = res
        })
      },
      toSearch() {
        if (!this.disabled) return
        this.$u.route('/pages/search/search')
      },
      openPopup() {
        this.showPopup = true
      },
      inputValueChange(e) {
        this.$emit("inputValueChange", e.detail.value)
      },
    },
    computed: {
      maxWidth: function() {
        return this.$store.getters.maxWidth
      },
      headerHeight: function() {
        return this.$store.getters.headerHeight + this.$store.state.equipment
          .SystemInfo.statusBarHeight
      },
      SystemInfo: function() {
        return this.$store.state.equipment.SystemInfo
      },
    },
  }
</script>

<style lang="scss">
  .header-search-warp {
    height: 50px;
    padding: 4upx 0;
    background-color: $color-background;
    color: $color-text-theme;

    .header_warp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 0 30upx;

      .search-input {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;

        image {
          position: absolute;
          left: 20upx;
          width: 31upx;
          height: 31upx;
        }

        input {
          border-radius: 30upx;
          background-color: #fff;
          width: 100%;
          height: 60upx;
          padding-left: 70upx;
        }
      }

      .icon {
        width: 30upx;
        height: 30upx;
        margin-left: 40upx;
      }
    }
  }

  .popup_header_warp {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28upx;
      font-weight: 600;
    }
  }

  .popup_view {
    width: 100%;
    height: 100%;
    display: flex;

    .left_warp {
      width: 200upx;
      flex-shrink: 0;
      border-right: 4upx solid #ccc;
      border-top: 2upx solid #ccc;

      .scroll_left {
        width: 200upx;
        height: 100%;

        .left_item {
          width: 100%;
          height: 90upx;
          @include flex(center, center);
          border-left: 8upx solid transparent;
        }

        .big_active {
          border-left: 8upx solid #0058a3;
        }
      }
    }

    .right_warp {
      flex: 1;
      padding: 30upx;
      border-top: 2upx solid #ccc;

      .scroll_right {
        width: 100%;
        height: 100%;

        .right_item {
          padding: 10upx 20upx;
          border: 2upx solid #ccc;
          margin-right: 10upx;
          margin-bottom: 10upx;
        }

        .right_active_item {
          border: 2upx solid #0058A3;
        }
      }
    }
  }
</style>
